<template>
	<view class="container">
		<view class="head">
			<u-tabs bgColor="#fff" inactive-color="#666666" barWidth="80" barHeight="4" :height="100"
				active-color="#1684FC" :list="t_list" :is-scroll="false" :current="t_index"
				@change="changetheme"></u-tabs>
		</view>
		<view class="body">
			<scroll-view scroll-y="true" style="width: 100%; height: 100%;" :refresher-enabled='true'
				:refresher-triggered='isFresh' @refresherrefresh='freshList()' @scrolltolower="getList"
				refresher-background='#f7f7f7'>
				<view class="item" v-for="(item,index) in list" :key="index" v-if="list.length > 0">
					<view class="label" v-if="restStatus == 'wait_audit'" style="color: #FF9A16; font-size: 30rpx;">待审核</view>
					<view class="label" v-else-if="restStatus == 'passed'" style="font-size: 30rpx;">已通过</view>
					<view class="label" v-else-if="restStatus == 'reject'" style="font-size: 30rpx;">已拒绝</view>
					<view class="item-cell flex-ac" style="margin-top: 0;">
						<view class="hd">申请人</view>
						<view class="bd">{{item.driver.userName || ''}}</view>
					</view>
					<view class="item-cell flex-ac">
						<view class="hd">车牌号</view>
						<view class="bd">{{item.sideAgreementNumber || ''}}</view>
					</view>
					<view class="item-cell flex-ac">
						<view class="hd">调休时间</view>
						<view class="bd">{{item.startTime.split(':')[0] + ':' + item.startTime.split(':')[1]}} 至
							{{item.endTime.split(':')[0] + ':' + item.endTime.split(':')[1]}}</view>
					</view>
					<view class="item-cell flex-ac">
						<view class="hd">调休原因</view>
						<view class="bd">{{item.explain || ''}}</view>
					</view>
					<view class="item-cell flex-ac">
						<view class="hd">申请时间</view>
						<view class="bd">{{item.createTime || ''}}</view>
					</view>
					<view class="item-btn flex-ac">
						<view class="btn-3 flexmid" @click="review(index, item.id)">初审</view>
						<view class="btn-2 flexmid" @click="del(index, item.id)">删除</view>
					</view>
				</view>
				<x-nothing v-if="list.length === 0"></x-nothing>
				<u-gap height="20"></u-gap>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				t_list: [{
						name: '待审核'
					},
					{
						name: '已通过'
					},
					{
						name: '已拒绝'
					}
				],
				t_index: 0,
				restStatus: 'wait_audit',
				list: [],
				pageNo: 1,
				pageSize: 10,
				keys: '',
				colorList: [],
				cartypeList: [],
				isFresh: false,
				queryForm: {
					current: 1,
					size: 10
				}
			}
		},
		onLoad(opt) {
			if (opt) console.log('opt:', opt)
		},
		onShow() {
			this.queryForm.current = 1
			this.getList()
		},
		methods: {
			changetheme(index) {
				this.t_index = index;
				this.queryForm.current = 1
				if (this.t_index === 0) {
					this.restStatus = 'wait_audit'
				} else if (this.t_index === 1) {
					this.restStatus = 'passed'
				} else if (this.t_index === 2) {
					this.restStatus = 'reject'
				}
				this.getList()
			},
			lookDetail(id, type) {
				// this.$Jump.Open(`./info?id=${id}&type=${type}`)
				this.$Net.imgPath(id).then(res => {
					console.log('url11111111:', res)
					// this.url = res[0]
					// this.url = this.viewerUrl + 'https://cxs-test-files.oss-cn-beijing.aliyuncs.com/1734037327980601345.pdf'
					// #ifdef APP-PLUS
					this.$Jump.Open(`./info?url=${res[0]}&type=${type}`)
					// #endif
					// #ifdef MP-WEIXIN 
					// this.url = res[0]
					this.downLoad(res[0])
					// #endif
					this.isloading = true
				})
			},
			search() {
				this.queryForm.current = 1
				this.getList()
			},
			freshList() {
				this.queryForm.current = 1
				this.isFresh = true
				this.getList()
			},
			// /driverApi/carrierContract/page
			getList() {
				this.$Net.get('/carLeave/page/' + this.restStatus, this.queryForm).then(res => {
					console.log('合同:', res.data)
					if (this.queryForm.current = 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data)
					}
					this.pageNo++
					setTimeout(() => {
						this.isFresh = false
					}, 500)
				})
			},

			del(index) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除该账户吗',
					success: (res) => {
						if (res.confirm) {
							console.log('删除')
							this.$Net.post('/driverApi/receiptManage/delete', {
								id: this.list[index].id
							}).then(res => {
								this.list.splice(index, 1)
								this.$Toast.messageIcon('操作成功')
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.body {
		width: 100%;
		padding: 20rpx 20rpx 0 20rpx;
		flex: 1;
		overflow: hidden;

		.item {
			width: 100%;
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 30rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			.label{
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				font-size: 26rpx;
			}
			.item-name {
				font-weight: bold;
				font-size: 40rpx;
				color: #3F4151;
			}

			.item-cell {
				margin-top: 20rpx;

				.hd {
					font-size: 26rpx;
					color: #777C99;
					width: 130rpx;
				}

				.bd {
					font-size: 26rpx;
				}
			}

			.item-cell:first-child {
				margin-top: 0;
			}

			.item-btn {
				width: 100%;
				flex-direction: row-reverse;
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1rpx solid #f7f7f7;

				.btn-1 {
					width: 140rpx;
					height: 70rpx;
					border: 2rpx solid #cbcbcb;
					border-radius: 8rpx;
					font-size: 30rpx;
					color: #777C99;
				}

				.btn-2 {
					width: 120rpx;
					height: 60rpx;
					border: 2rpx solid #999;
					border-radius: 8rpx;
					// font-size: 28rpx;
					color: #999;
					margin-left: 20rpx;
				}

				.btn-3 {
					width: 120rpx;
					height: 60rpx;
					border: 1rpx solid #40A9FF;
					border-radius: 10rpx;
					color: #40A9FF;
					margin-left: 20rpx;
				}
			}
		}
	}

	.searchBox {
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		padding: 16rpx 0 16rpx 30rpx;

		.search {
			flex: 1;
			height: 100%;
			border-radius: 10rpx;
			background-color: #f7f7f7;
			padding: 0 30rpx;

			input {
				width: 100%;
				height: 100%;
				font-size: 30rpx;
				color: #333;
			}
		}

		.btn {
			width: 120rpx;
			height: 100%;
			color: #1784FC;
			font-size: 30rpx;
		}
	}

	// @import './style.scss';
	.u-slot-content {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: center;
		position: relative;
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
	}

	.u-slot-right {
		.edit {
			height: 44px;
			// padding: 0 30rpx;
			width: 90rpx;
			text-align: center;
			font-size: 30rpx;
			line-height: 44px;
			color: #3F4151;
			font-weight: normal;
		}

		.bc {
			color: #1784FC !important;
		}
	}
</style>